<template>
    <div>
        <span>API接口地址:</span>
        <div class="mb-8px flex items-center">
            <jb-input class="mr-8px" v-model:value="info.testApiUrl"></jb-input>
            <jb-btn type="primary" @click="handleRead">读取</jb-btn>
        </div>
        <span>JSON数据：</span>
        <json-editor-vue class="mt-8px h-600px" v-model:value="info.testJsonData"></json-editor-vue>
        <div class="mt-16px flex justify-center items-center">
            <jb-btn type="primary" @click="handleSubmit">确认提交</jb-btn>
            <jb-btn class="ml-8px" icon="mdi:eye"
                    :modal-component="Preview"
                    :modal-args="{
                                            negativeText: '关闭',
                                            defaultWidth: '1400',
                                            resizable: true
                                        }"
                    :modal-component-props="{
                        testJson:info.testJsonData
                        }
                    "
                    modal-title="测试-预览">
                测试-预览
            </jb-btn>
            <jb-btn class="ml-8px" @click="handlePrint">测试-打印</jb-btn>
            <jb-btn class="ml-8px" @click="handlePdf">测试-导出PDF</jb-btn>
        </div>
    </div>
</template>
<script setup lang="ts">
import JsonEditorVue from 'json-editor-vue3'
import {JBoltApi} from "@/utils";
import Preview from "@/views/_builtin/development/hiprint/components/preview/index.vue";
import {storeToRefs} from "pinia";
import {usePrintStore} from "@/store/modules/print";
import {inject} from "vue";

const {hiprintTemplate,info} = storeToRefs((usePrintStore()))
const closeDrawer = inject('closeDrawer') as any

function handleRead() {
    if(!info.value.testApiUrl){
        window.$message.warning('API接口地址不能为空')
        return
    }
    JBoltApi.get(info.value.testApiUrl).then(({result}) => {
        info.value.testJsonData = result.data;
    })
}


function handleSubmit() {
    if(!info.value.id) return
    let url = '/api/admin/hiprint/tpl/submit'
    JBoltApi.tryPost(url, info.value).then(()=>{
        closeDrawer()
    })
}

function handlePrint() {
    // 参数: 打印时设置 左偏移量，上偏移量
    let options = {leftOffset: -1, topOffset: -1};
    // 扩展
    let ext = {
        callback: () => {
            console.log("浏览器打印窗口已打开");
        },
        styleHandler: () => {
            // 重写打印样式

        },
    };
    // 调用浏览器打印
    hiprintTemplate.value.print(info.value.testJsonData, options, ext);
}

function handlePdf() {
    hiprintTemplate.value?.toPdf(info.value.testJsonData, '测试导出');
}


</script>

<style scoped>

</style>